<!DOCTYPE html>
<style>
  div {
    background-color: #00ffff;
    width: 100px;
    height: 100px;
  }
  span:active  {
    display: none;
  }
</style>

<div>
<div id='host'>
  <span>Click Me</span>
</div>
</div>

<pre id='description'></pre>
<pre id='console'></pre>

<script src='../../resources/js-test.js'></script>

<script>
var root = document.getElementById('host').attachShadow({mode: 'open'});
root.innerHTML =
  '<style> div {background-color: #00ff00;}div:active {background-color: #ff0000;}</style><div id=shadowdom style="width: 100px; height: 100px"><slot></slot></div>'

function shouldHaveBackground(element, bg) {
  background = getComputedStyle(element, null).getPropertyValue('background-color');
  shouldBeEqualToString('background', bg);
}

description('Chain of active elements should be cleared including the Shadow DOM elements');

if (window.testRunner) {
  var shadow = root.querySelector('#shadowdom');

  eventSender.dragMode = false;
  // This mouse click seems to be required for WebKit's event handling to
  // pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
  eventSender.mouseDown();
  eventSender.mouseUp();

  var span = document.querySelector('span');
  var spanRect = span.getBoundingClientRect();
  // Mouse over the span.
  eventSender.mouseMoveTo(spanRect.left + 5, spanRect.top + 5);
  shouldHaveBackground(shadow, 'rgb(0, 255, 0)');
  eventSender.mouseDown();
  shouldHaveBackground(shadow, 'rgb(255, 0, 0)');
  eventSender.mouseUp();
  shouldHaveBackground(shadow, 'rgb(0, 255, 0)');
}
</script>
